<template>
    <el-card>
        <el-form :model="queryParams" ref="queryParams" :inline="true" label-width="100px">
            <el-form-item label="岗位类型：" prop="category">
                 <el-select v-model="queryParams.category" placeholder="岗位类型" size="small">
                    <el-option v-for="item in postType" :label="item.dictValue" :key="item.dictKey" :value="item.dictKey"></el-option>
                  </el-select>
            </el-form-item>
            <el-form-item label="岗位编号：" prop="postCode">
                <el-input v-model="queryParams.postCode" placeholder="岗位编号" size="small"></el-input>
            </el-form-item>
            <el-form-item label="岗位名称：" prop="postName">
                <el-input v-model="queryParams.postName" placeholder="岗位名称" size="small"></el-input>
            </el-form-item>
            <el-form-item >
                <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-delete" size="small" @click="resetQuery('queryParams')">清空</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10">
                        <el-col :span="24">
                            <div style="margin-bottom: 10px">
                                <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd">新增</el-button>
                                <el-button type="danger" @click="handleDelete(mutiSelect)" plain icon="el-icon-delete" size="small">删除</el-button>
                            </div>
                        </el-col>
        </el-row>
        <el-table :data="tableData" style="width: 100%" row-key="id" border size="small">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="index" label="#" width="50"></el-table-column>
            <el-table-column prop="categoryName" label="岗位类型">
                <template slot-scope="{row}">
                    <el-tag type="primary">{{row.categoryName}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="postCode" label="岗位编号"></el-table-column>
            <el-table-column prop="postName" label="岗位名称"></el-table-column>
            <el-table-column prop="sort" label="岗位排序" width="100"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope"> 
                    <el-button type="text" size="mini" @click="handleView(scope.row)" icon="el-icon-view">查看</el-button>
                    <el-button type="text" size="mini" @click="handleEdit(scope.row)" icon="el-icon-edit">编辑</el-button>
                    <el-button size="mini" type="text" @click="handleDelete(scope.row.id)" icon="el-icon-delete">删除</el-button>
                </template>
           </el-table-column>
        </el-table>
        <el-pagination
            v-show="total>0"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            :current-page="1"
            :page-sizes="[10, 20, 30, 40,50,100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            class="pagination-container"
            :total="total">
        </el-pagination>
        <el-dialog :title="formTitle" :visible.sync="postFormVisible" @close="resetForm">
            <el-form :model="form" :rules="rules" ref="form" :disabled="isView">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item  prop="category" label="岗位类型" :label-width="formLabelWidth" required>
                             <el-select v-model="form.category" placeholder="请选择" size="mini" style="width: 100%">
                                <el-option
                                v-for="item in postType"
                                :key="item.dictKey"
                                :label="item.dictValue"
                                :value="item.dictKey*1">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item  prop="postCode" label="岗位编号" :label-width="formLabelWidth" required>
                            <el-input v-model="form.postCode" autocomplete="off" size="small" placeholder="请输入机构全称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                 <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item  prop="postName" label="岗位名称" :label-width="formLabelWidth" required>
                             <el-input v-model="form.postName" autocomplete="off" size="small" placeholder="请输入岗位名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item  prop="sort" label="岗位排序" :label-width="formLabelWidth" required>
                             <el-input-number v-model="form.sort" style="width: 100%" size="mini" controls-position="right" :min="1" :max="10"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                       <el-form-item  prop="remark" label="岗位描述" :label-width="formLabelWidth">
                            <el-input v-model="form.remark" :rows="6" type="textarea" autocomplete="off" size="mini" placeholder="请输入岗位描述"></el-input>
                       </el-form-item>
                  </el-col>
                </el-row>
            </el-form>
             <div slot="footer" class="dialog-footer" v-if="!isView">
                <el-button type="primary" @click="handleSubmit('form')" size="small">保存</el-button>
                <el-button @click="postFormVisible = false" size="small">取 消</el-button>
            </div>
        </el-dialog>
    </el-card>
</template>

<script>

import { getBladeSystemList,getDictionary } from '@/api/system/dept.api.js'
import { save,delPost } from '@/api/system/post.api.js'
    export default {
       data() {
           return {
                queryParams: {
                    current: 1,
                    size: 10,
                    category: undefined,
                    postCode:undefined,
                    postName: undefined
                },
                tableData: [],
                total: 0,
                // 岗位类型
                postType: [],
                postFormVisible: false,
                isView: false,
                form: {},
                rules: {
                    category:[
                        { required: true, message: '请选择岗位类型', trigger: 'blur' },
                    ],
                    postCode:[
                        { required: true, message: '请输入岗位编号', trigger: 'blur' },
                    ],
                    postName:[
                        { required: true, message: '请输入岗位名称', trigger: 'blur' },
                    ],
                     sort:[
                        { required: true, message: '请输入岗位排序', trigger: 'blur' },
                    ],
                },
                formTitle: '新增',
                formLabelWidth: '120px',
                mutiSelect: []
           }
       },
       mounted() {
        this.getList();
        this.getFormDictionary();
       },
       methods: {
                // 搜索
            handleQuery() {
                this.queryParams.current = 1;
                this.getList();
            },
            // 清空
            resetQuery(formName) {
                this.$refs[formName].resetFields();
                this.getList();
            },
            handleSizeChange(val) {
                this.queryParams.size = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.queryParams.current = val;
                this.getList();
            },
           async getList() {
                const result = await getBladeSystemList(this.queryParams)
                if(result.code === 200) {
                   this.tableData = result.data.records;
                   this.total = result.data.total
                }
           },
           selectionChange(val) {
               this.mutiSelect = val;
           },
          async getFormDictionary() {
               const result = await getDictionary('post_category');
               if(result.code === 200) {
                   this.postType = result.data;
                }
           },
           handleAdd() {
               this.formTitle = '新增';
               this.isView = false;
               this.postFormVisible = true;
           },
           handleSubmit(formName) {
                this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    const data = {
                        $category:  this.postType.find(item=>{
                            return item.dictKey === this.form.category;
                        }).dictValue,
                         $tenantId: "",
                         tenantId: "",
                         ...this.form
                    }
                    const result = await save(data);
                    if(result.code === 200) {
                        this.$message({
                            message: '保存成功',
                            type: 'success'
                        });
                        this.postFormVisible = false;
                        this.getList();
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
           },
           handleEdit(row) {
               this.formTitle = '编辑';
               this.isView = false;
               this.form = row;
               this.postFormVisible = true;
           },
            handleView(row) {
               this.formTitle = '查看';
               this.isView = true;
               this.form = row;
               this.postFormVisible = true;
           },
            handleDelete(ids) {
                let postIds;
                typeof ids === 'string'?postIds=ids:postIds=ids.map(item=>item.id).toString();
                this.$confirm('确定将选择的数据删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(async () => {
                        const result = await delPost(postIds);
                        if(result.code === 200) {
                             this.$message({
                                type: 'success',
                                message: '删除成功!'
                           });
                           this.getList();
                        }
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
             resetForm() {
               this.$refs['form'].resetFields();
            },

       }
    }
</script>

<style lang="scss" scoped>
.pagination-container {
    padding: 10px;
    text-align: right;
}
</style>